﻿@page "/admin/settings/custom-css"
@Html.AntiForgeryToken()
@{
    var settings = BlogConfig.CustomStyleSheetSettings;
}

@section scripts{
    <partial name="_MonacoLoaderScript" />
    <script>
        var cssContentEditor = null;

        require(['vs/editor/editor.main'], function () {
            cssContentEditor = initEditor('CssContentEditor', "#settings_CssCode", 'css');
        });
    </script>
    <script type="module">
        import * as settings from '/js/app/admin.settings.module.js';

        function handleSubmit(event) {
            assignEditorValues(cssContentEditor, "#settings_CssCode");
            settings.handleSettingsSubmit(event);
        }

        const form = document.querySelector('#form-settings');
        form.addEventListener('submit', handleSubmit);
    </script>
}

@section head{
    <style>
        .monaco-target {
            border: 1px solid #dee2e6;
            width: 100%;
            min-height: calc(100vh - 370px);
        }
    </style>
}

@section admintoolbar{
    <partial name="_SettingsHeader" />
}

<form id="form-settings" asp-controller="Settings" asp-action="CustomStyleSheet">
    <div class="admin-settings-entry-container">
        <div class="settings-entry2 row align-items-center py-3 px-2 rounded-3 shadow-sm border bg-white mb-2">
            <div class="col-auto">
                <i class="bi-palette settings-entry-icon"></i>
            </div>
            <div class="col">
                <label asp-for="@settings.EnableCustomCss" class="form-check-label"></label>
            </div>
            <div class="col-md-5 text-end">
                <div class="form-check form-switch form-control-lg">
                    <input type="hidden" name="EnableCustomCss" value="false">
                    <input type="checkbox" name="EnableCustomCss" value="true" class="form-check-input" @(@settings.EnableCustomCss ? "checked" : null) />
                </div>
            </div>
        </div>

        <div id="CssContentEditor" class="monaco-target p-3 rounded-3 shadow-sm border bg-white">
        </div>
        <textarea asp-for="@settings.CssCode" class="settings-csscontent-textarea d-none"></textarea>
    </div>

    <div class="admin-settings-action-container border-top pt-2 mt-2">
        <button type="submit" class="btn btn-outline-accent" id="btn-save-settings">
            @SharedLocalizer["Save"]
        </button>
    </div>
</form>
